<template>
	<view class="">
		<!-- 	<u-navbar bgColor='#4871C0' :titleStyle="{ color: '#FFF'}" title="清外足迹" leftIconColor="#FFF"
			@rightClick="rightClick" :autoBack="true" >
		</u-navbar> -->

		<u-transition :show="true" mode="fade">
			<view class="newsList" v-if="listData.length!==0">
				<view v-for="(item,index) in listData" class="newsItem" :class="item.diagram.length > 3 ? 'moreImg':''"
					@tap.stop="gotoNewsDetail(item.id)">
					<view v-if='item.diagram.length > 3 '>
						<view class="newsText">
							{{item.title}}
						</view>
						<view class="imgBox">
							<view class="imgItem" v-for="(i,arrI) in 3">
								<!-- <image :src="item.diagram[arrI]" mode="widthFix" @tap="previewImage(index,arrI)"></image> -->
								<image :src="item.diagram[arrI]" mode="widthFix"></image>
							</view>
						</view>
						<view class="personalMsg">
							<view class="personalMsgImg">
								<image :src="item.avatar" mode="widthFix"></image>
							</view>
							<view class="time">
								<text>{{item.nickname}}</text>
								<text class="line"></text>
								<text>{{item.createtime}}</text>
							</view>
						</view>
					</view>

					<view v-else-if='!(item.video==""||item.video==null)'>
						<view class="bunkItem">
							<view class="newsR">
								<!-- <image :src="item.diagram[0]" mode="widthFix"></image> -->
								<video class="video" id="videoId" title="" :controls="true" :enable-play-gesture='true'
									:src="item.video" :poster='item.video_first' :initial-time='0.01'>
								</video>
							</view>
							<view class="newsText">
								{{item.title}}
							</view>
							<view class="personalMsg">
								<view class="personalMsgImg">
									<image :src="item.avatar" mode="widthFix"></image>
								</view>
								<view class="time">
									<text>{{item.nickname}}</text>
									<text class="line"></text>
									<text>{{item.createtime}}</text>
								</view>
							</view>
						</view>
					</view>

					<view v-else-if='item.diagram.length < 3 ' style="display: flex;">
						<view class="newsL">
							<view class="newsText">
								{{item.title}}
							</view>
							<view class="personalMsg">
								<view class="personalMsgImg">
									<image :src="item.avatar" mode="widthFix"></image>
								</view>
								<view class="time">
									<text>{{item.nickname}}</text>
									<text class="line"></text>
									<text>{{item.createtime}}</text>
								</view>
							</view>
						</view>
						<view class="newsR" v-if="item.diagram.length > 0 && item.diagram.length < 3&&item.diagram[0]!=''">
							<image :src="item.diagram[0]" mode="widthFix"></image>
						</view>
					</view>


				</view>


				<u-loadmore :status="status" @loadmore='isLastPage' />

			</view>
			<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" marginTop='400rpx'>
			</u-empty>
		</u-transition>

		<view class="add-btn" @tap.stop="gotoPublishContent"></view>

		<myTabBar :list='tabList' :currentIndex="0"></myTabBar>
	</view>
</template>

<script>
	import myTabBar from '../../../component/customTabBar/customTabBar.vue'
	import {
		articleList
	} from '@/api/schoolEventApi.js'
	export default {
		components: {
			myTabBar
		},
		data() {
			return {
				tabList: [{
						title: "首页",
						url: "/pages/tabbar-5-detial/schoolEvent/schoolEvent",
						icon: "home"
					},
					{
						title: "待办",
						url: "/pages/tabbar-5-detial/backlog/backlog",
						icon: "chat"
					},
					{
						title: "草稿",
						url: "/pages/tabbar-5-detial/draft/draft",
						icon: "edit-pen"
					},
					{
						title: "我的发布",
						url: "/pages/tabbar-5-detial/myPublish/myPublish",
						icon: "file-text"
					},
					{
						title: "清外足迹",
						url: "/pages/tabbar-5-detial/schoolEvent/footConfig",
						icon: "file-text"
					}
				],
				limit: 10,
				page: 1,
				lastPage: 0,
				listData: [],
				status: 'loadmore',
			}
		},
		created() {
			console.log("==========thos成功课11", uni.getStorageSync("token") || window.location.href.indexOf('code'));
			if (uni.getStorageSync("token") || window.location.href.indexOf('code')) {
				this.getList();
			}

		},
		methods: {
			//预览轮播图
			// previewImage:function(current,index,num){
			// 	let arr = [];
			// 	for (let i = 0; i < num; i++) {
			// 		arr.push(this.listData[index].diagram[i]);
			// 	}
			// 	//uniapp预览轮播图
			// 	uni.previewImage({
			// 		current: current,
			// 		urls: arr //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			// 	})
			// },
			gotoNewsDetail(id) {
				uni.navigateTo({
					url: '/pages/tabbar-5-detial/schoolEvent/newsDetail/newsDetail?pageType=0&id=' + id
				});
			},
			gotoPublishContent() {
				uni.navigateTo({
					url: '/pages/tabbar-5-detial/schoolEvent/publishContent/publishContent'
				});
			},
			async getList() {
				let params = {
					limit: this.limit,
					page: this.page
				};
				uni.showLoading({
					title: '加载中'
				});
				console.log("=========articleList", articleList)
				await articleList(params).then(res => {
					console.log(res)
					uni.hideLoading();
					this.status = 'loadmore'
					if (res.code == 1) {
						res.data.data.forEach((item, index) => {
							if (item.diagram == null) item.diagram = [];
						})
						this.listData = res.data.data;
						console.log(this.listData)
						this.lastPage = res.last_page;
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
					}
				})
			},

			isLastPage() {
				if (this.lastPage > this.page) {
					this.page++;
					this.status = 'loading'
					this.getList();
					return true;
				} else {
					this.status = 'nomore';
					return false;
				}
			}
		},
		onReachBottom() {
			this.isLastPage();
		}
	}
</script>

<style>
	image {
		width: 100%;
	}

	video {
		width: 100%;
	}

	.newsList {
		padding: 20rpx;
	}

	.newsItem {
		display: flex;
		border-bottom: 1px dashed #eee;
		padding-bottom: 26rpx;
		padding-top: 26rpx;
	}

	.newsItem>view {
		width: 100%;
	}

	.moreImg {
		flex-direction: column;
	}

	.imgBox {
		display: flex;
		margin-top: 20rpx;
	}

	.imgItem {
		background-color: #f0f0f0;
		width: 33.33%;
		height: 200rpx;
		margin-left: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.imgItem:first-child {
		margin-left: 0;
	}


	.bunkItem {
		display: block;
	}

	.bunkItem .newsR {
		height: auto;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.bunkItem .newsTime {
		margin-top: 20rpx;
	}

	.newsL {
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: space-between;
		/* align-items: center; */
	}

	.newsText {

		overflow: hidden;
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		display: -webkit-box;
		/* 对象作为伸缩盒子模型显示 */
		-webkit-box-orient: vertical;
		/* 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-line-clamp: 2;
		/* 显示的行数 */
	}

	.newsTime {
		margin-top: 40rpx;
		color: #aaa;
		font-size: 28rpx;
	}

	.newsR {
		width: 300rpx;
		height: 200rpx;
		background-color: #f0f0f0;
		border-radius: 16rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.newsR image {
		width: 100%;
	}

	.add-btn {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 220rpx;
		right: 40rpx;
		background: url('../../../static/img/tabbar/add.png') no-repeat;
		background-position: center;
		background-size: cover;
		z-index: 9999;
	}

	.personalMsg {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.personalMsgImg {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		overflow: hidden;
		background-color: #f8f8f8;
	}

	.line {
		margin: 0 16rpx;
		width: 2rpx;
		height: 20rpx;
		background-color: #aaa;
		display: inline-block;
	}

	.time {
		color: #aaa;
		font-size: 28rpx;
		/* padding-left: 28rpx; */
		margin-left: 10rpx;
	}
</style>
